<!--  -->
<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="onload" finished-text="没有更多了">
        <van-cell
          class="vancell"
          v-for="item in Goodslist"
          :key="item.id"
          @click="toGoodsInfo(item.id)"
        >
          <van-image :src="item.img_url" width="100" height="100"/>
          <p>{{item.title}}</p>
          <div class="bottom_box">
            <div>
              <span>￥{{item.sell_price}}</span>
              <s>￥{{item.market_price}}</s>
            </div>
            <div>
              <span>热卖中</span>
              <span>剩{{item.stock_quantity}}件</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      page: 1,
      Goodslist: [],
      loading: false,
      finished: false,
      isLoading: false
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      const { data: res } = await this.$http.get(
        `/api/getgoods?pageindex=${this.page}`
      );
      this.loading = false;
      if (res.message.length === 0) this.finished = true;
      // this.Goodslist = res.message;
      Array.from(res.message).forEach(item => {
        this.Goodslist.push(item);
      });
      console.log(res.message.length);
    },
    onload() {
      this.page++;
      this.getGoodsList();
    },
    async onRefresh() {
      this.page = 1;
      this.Goodslist = [];
      Toast("刷新成功");
      this.isLoading = false;
      await this.getGoodsList();
    },
    toGoodsInfo(id) {
      console.log(id);
      this.$router.push("/goods/detail/" + id);
    }
  }
};
</script>

<style lang="less" scoped>
.van-list {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin: 5px 10px;
}
.vancell {
  position: relative;
  display: flex;
  width: 48%;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 0;
  align-content: space-between;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 30px;
  background-color: #fff;
  .van-cell__value {
    text-align: center;
  }
  .van-image {
    padding: 10px;
    min-height: 120px;
  }
  p {
    padding: 0 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .bottom_box {
    width: 100%;
    background: #eee;
    padding: 5px 0;
    div {
      text-align: left;
    }
    div:first-child span {
      padding: 0 10px;
      font-size: 16px;
      color: red;
      margin-right: 15px;
    }
    div:nth-child(2) {
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      padding: 0 10px;
    }
  }
}
</style>
